{% extends 'master.html' %}
{% block main %}
{% raw %}
    <div class="toobox" id="report">
        <p>
        <b>{{tname}}</b>
        望远镜 <input class="tel"  name="tel"  type="text" v-model="tel" />
        验证码 <input class="pswd" name="pswd" type="password" v-model="pswd" />
        </p>
        <p>
        终端 <select class="term" v-model="term">
            <option v-for="t in termall" :value="t">{{t}}</option>
        </select>
        观测助手姓名、联系方式 <select class="opsel" v-model="opsel" @change="op_sel">
            <option v-for="o in opall" :value="o">{{o}}</option>
            <option value="-" selected>其他</option>
        </select>
        <input class="opinfo" name="opinfo" type="text" v-model="opinfo"  v-if="opsel=='-'" />
        </p>
        <p v-for="s,i in statusall">
        <button class="sta" @click="report(i)">{{s}}</button>
        <span class="note">{{statusnote[i]}}</span>
        </p>
    </div>    
    <div class="toobox" id="news">
        <h4>望远镜最新状态 </h4>
        <p>
            <button class="btn" @click="loadnews" title="刷新">↺</button>
            <input type="radio" v-model="newsall" id="showone" name="newsall" value="one" @change="loadnews" />
            <label for="showone">最新</label>
            <input type="radio" v-model="newsall" id="showall" name="newsall" value="all" @change="loadnews" />
            <label for="showall">全部</label>
        </p>
        <div>
            <span class="teltel"   >望远镜</span>
            <span class="teltime"  >报告时间</span>
            <span class="telstatus">状态</span>
            <span class="telterm"  >终端</span>
            <span class="telopinfo">观测助手</span>
        </div>
        <div v-for='t in news' :class="'trtr tr'+t.status">
            <span class="teltel"   >{{t.tel}}</span>
            <span class="teltime"  >{{t.time}}</span>
            <span class="telstatus">{{statusall[t.status]}}</span>
            <span class="telterm"  >{{t.term}}</span>
            <span class="telopinfo">{{t.op}}</span>
        </div>
    </div>    
{% endraw %}
{% endblock %}

{% block code %}
<script>
    const app = {
        data() { return {
            tel: "{{tel}}",
            pswd: "{{pswd}}",
            tname: "{{tname}}",
            term: "",
            opsel: "",
            opinfo: "",
            status: 0,
            statusall: {{statusall | safe}},
            statusnote: {{statusnote | safe}},
            opall: {{op | safe}},
            termall: {{term | safe}},
            news: [],
            newsall: "one",
            timerId: null,  // 定时器ID
        } }, // data
        
        computed: {
        }, // computed
        
        methods: {
            op_sel: function(){
                this.opinfo = this.opsel == "-" ? "" : this.opsel
            },
            
            report: function(s){
                // 检查各项必填信息是否填写
                if (this.term == "" || this.opinfo == "") {
                    alert("请选择终端，请选择或填写观测助手信息")
                    return
                }
                // 构建提交数据
                data = new FormData()
                data.append('tel', this.tel)
                data.append("pswd", this.pswd)
                data.append("term", this.term)
                data.append("opinfo", this.opinfo)
                data.append("status", s)
                axios
                    .post('./report', data)
                    .then( response => {
                        // console.log(response.data)
                        // alert(response.data)
                        this.loadnews()
                    } )
                    .catch( function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            
            loadnews: function() {
                data = new FormData()
                data.append('tel', this.tel)
                data.append("pswd", this.pswd)
                data.append("show", this.tel)
                act = this.newsall == "all" ? "./last" : "./news"
                axios
                    .post(act, data)
                    .then( response => {
                        this.news = eval(response.data)
                        console.log(response.data)
                    } )
                    .catch( function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            
            startTimer() {
                this.timerId = setInterval(() => {
                    // console.log('定时任务'); // 这里写需要执行的操作或者调用其他方法
                    this.loadnews()
                }, 5*60*1000);
            },
            stopTimer() {
                clearInterval(this.timerId); // 清除定时器
            }


        }, //methods

        mounted() {
            this.loadnews()
            this.startTimer() // 页面加载完成后开始计时器
        }, // mounted
        beforeDestroy() {
            this.stopTimer(); // 组件被销毁前先清除定时器
        }
    } //app

    Vue.createApp(app).mount('#toomain')
</script>
{% endblock %}
